import React, { useContext, useEffect, useRef } from "react";
import './main.component.css';
import TestBComponent from "./test-b/test-b.component";
import { GLOBAL } from "../../app.component";
import { InnerMqClient } from "../../rx/client/inner-mq.client";
import { Topic } from "../../rx/topic";

const MainComponent: React.FC = () => {

	const global = useContext(GLOBAL);
	const client = useRef<InnerMqClient>();

	useEffect(() => {
		client.current = global.innerMqService.createClient();
		client.current.sub(Topic.MY_TP_1, (res) => {
			console.log(res);
		});
		return () => {
			client.current && global.innerMqService.destroyClient(client.current);
		};
	}, []);

	return (
		<div className="container-main">
			<div className="name-main">
				main component
			</div>
			<div className="comp-test-b">
				<TestBComponent></TestBComponent>
			</div>
		</div>
	);
}

export default MainComponent;
